<article id="datos-de-usuario-page" class="datos-de-usuario-container page-container">
    <form id="form-datos-personales">
        <div class="row-fluid">
            <header class="title">
                <span class="icons icons-panel icon-datos-personales"></span>
                <h3 class="font-color-15">Datos personales</h3>
            </header>

            <div class="content">
                <div class="row-fluid">
                    <span class="span"></span>
                    <label id="nick" class="field-container span3">
                        <b class="title span">Nombre de usuario</b>
                        <span class="value span">${usuarioNick}</span>
                    </label>
                    <label id="email" class="field-container span3">
                        <b class="title span">Direccion de email</b>
                        <span class="value span">${usuarioEmail}</span>
                    </label>
                    <label id="nombre" class="field-container span8">
                        <b class="title span">Nombre completo</b>
                        <input type="text" class="field span9" value="${usuarioNombre}" id="user-full-name-field" name="user-full-name-field"/>
                    </label>
                </div>
                <div class="row-fluid">
                    <span class="span"></span>
                    <label for="fecha-de-nacimiento-field" class="field-container fecha-de-nacimiento-field span4">
                        <b class="title span">${usuarioNacimiento}</b>
                        <input type="text" value="" name="fecha-de-nacimiento-field" id="fecha-de-nacimiento-field" class="field span datepicker" readonly="readonly"/>
                    </label>
                </div>
                <div class="row-fluid">
                    <span class="span"></span>
                    <label id="genero" class="field-container span8">
                        <b class="title span">G&eacute;nero</b>
                        <label class="span3 radio" for="masculino">
                            <span class="value">Masculino:</span>
                            <input type="radio" class="radio" value="masculino" id="masculino" name="genero[]"/>
                        </label>
                        <label class="span3 radio" for="femenino">
                            <span class="value">Femenino:</span>
                            <input type="radio" class="radio" value="femenino" id="femenino" name="genero[]"/>
                        </label>
                    </label>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <header class="title">
                <span class="icons icons-panel icon-datos-imagenes"></span>
                <h3 class="font-color-15">Cambia tu imagen de perfil</h3>
            </header>

            <div class="content">
                <label class="field-container image-container span3">
                    <b class="title">Imagen actual</b>
                    <div class="image-preview">
                        <img src="${usuarioAvatar}" alt="${usuarioNombre}" title="${usuarioNombre}"/>
                    </div>
                </label>
                <label class="field-container span6">
                    <p class="title">
                        La imagen debe tener un tama&ntilde;o de 120x120px. <br/>
                        Un peso m&aacute;ximo de 200kb <br/>
                        Estar en formato JPG, GIF o PNG</p>
                    <input type="file" id="submit-form-datos-personales" value="Carg&aacute; una im&aacute;gen"/>
                </label>
            </div>
        </div>

        <div class="row-fluid">
            <header class="title">
                <span class="icons icons-panel icon-datos-ubicacion"></span>
                <h3 class="font-color-15">Ubicaci&oacute;n <em>(Complet&aacute; para poder mostrarte resultados del mapa directamente en tu ubicaci&oacute;n)</em></h3>
            </header>

            <div class="content">
                <div id="ubicacion" class="span8">
                    <label class="field-container span3">
                        <b class="title">Pa&iacute;s</b>
                        <select id="pais-dropdown" class="field-dropdown span" name="pais-field">
                            <option value="1">Argentina</option>
                            <option value="2">Uruguay</option>
                        </select>
                    </label>
                    <label class="field-container span3">
                        <b class="title">Regi&oacute;n</b>
                        <select id="region-dropdown" class="field-dropdown span" name="region-field">
                            <option value="1">Buenos Aires</option>
                            <option value="2">Mendoza</option>
                        </select>
                    </label>
                    <label class="field-container span3">
                        <b class="title">Partido</b>
                        <select id="partido-dropdown" class="field-dropdown span" name="partido-field">
                            <option value="1">Ituzaingo</option>
                            <option value="2">Mor&oacute;n</option>
                        </select>
                    </label>
                    <label id="comuna-dropdown" class="field-container span3">
                        <b class="title">Comuna</b>
                        <select class="field-dropdown span" name="comuna-field">
                            <option value="1">Ituzaing&oacute;</option>
                            <option value="2">Castelar</option>
                        </select>
                    </label>
                </div>
            </div>
        </div>
        <div class="row-fluid content">
            <button class="btn btn-green" id="submit-form-datos-personales"><span class="text">Actualizar perfil</span></button>
        </div>
    </form>
</article>